{% extends "deportes/base.html" %}

{% block title %}Crear deporte{% endblock %}

{% block extrahead %}
        {% load static %}
        {% get_static_prefix as STATIC_PREFIX %}
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="{{STATIC_PREFIX}}js/deportes.dynamic-form.js"></script>
        <script language="javascript">
        // Funcion que agrega dinamicamente un campo para Dato Requerido.
        function addDR()
        {
            // Obtiene la variable y la incrementa en 1.
            var variable=document.getElementById("DRLen");
            var len=(variable.value-0);
            variable.value=len+1;
            // Obtiene el campo de datos requeridos
            var datosRequeridos=document.getElementById("datosRequeridos");
            // Crea el nuevo campo
            var newDatoRequerido=document.createElement("div");
            newDatoRequerido.setAttribute("id","datoRequerido"+len);
            newDatoRequerido.innerHTML="<select id=\"nombreDR" + len + "\" name=\"nombreDR" + len + "\"> {% for dato in datos %} <option id=\"{{dato}}-dr" + len + "\" value=\"{{dato}}\"> {{dato}} </option> {% endfor %}</select> <button id=\"removeDR" + len + "\"type=\"button\" onClick=\"removeDR(" + len + ");\">-</button>";
            datosRequeridos.appendChild(newDatoRequerido);
            // Quita el boton de agregar de donde estaba para ponerlo al final
            var boton=document.getElementById("buttonAddDR");
            datosRequeridos.removeChild(boton);
            datosRequeridos.appendChild(boton);
        }
        
        function loadData(){
            {% if deporte %}
                var nombreDeporte = document.getElementById("nombreDeporte");
                nombreDeporte.value = "{{deporte.nombre}}";
                removeDR(0);
                {% for dr in xml.datos_requeridos %}
                    addDR();
                    document.getElementById("{{dr}}-dr"+ (document.getElementById("DRLen").value -1) ).selected=true;
                {% endfor %}
                removeDisciplina(0);
                var numDisciplina;
                {% for disciplina in xml.disciplinas %}
                    addDisciplina();
                    document.getElementById("nombreDisciplina"+(document.getElementById("DisLen").value -1)).value = "{{disciplina.nombre}}";
                    document.getElementById("sexoDisciplina"+(document.getElementById("DisLen").value -1)).checked = {% if disciplina.tiene_sexo %}true{% else %}false{% endif %};
                    document.getElementById("edadDisciplina"+(document.getElementById("DisLen").value -1)).checked = {% if disciplina.tiene_edad %}true{% else %}false{% endif %};
                    document.getElementById("pesoDisciplina"+(document.getElementById("DisLen").value -1)).checked = {% if disciplina.tiene_peso %}true{% else %}false{% endif %};
                    habilitarSexo(document.getElementById("DisLen").value -1);
                    habilitarEdad(document.getElementById("DisLen").value -1);
                    habilitarPeso(document.getElementById("DisLen").value -1);
                    removeCategoria(document.getElementById("DisLen").value -1,0)
                    {% for categoria in disciplina.categorias %}
                        addCategoria(document.getElementById("DisLen").value -1);
                        document.getElementById("nombreCategoria"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.nombre}}";
                        {% if disciplina.tiene_sexo %}
                            {% if categoria.sexo == 'masculino' %}
                                document.getElementById("sexMasculino"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).checked = true;
                            {% else %}
                                {% if categoria.sexo == 'femenino' %}
                                    document.getElementById("sexFemenino"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).checked = true;
                                {% else %}
                                    {% if categoria.sexo == 'mixto' %}
                                        document.getElementById("sexMixto"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).checked = true;
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endif %}
                        {% if disciplina.tiene_edad %}
                            document.getElementById("edadMinima"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.edad.min}}";
                            document.getElementById("edadMaxima"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.edad.max}}";
                            document.getElementById("nombreEdad"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.edad.nombre}}";
                        {% endif %}
                        {% if disciplina.tiene_peso %}
                        document.getElementById("pesoMinimo"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.peso.min}}";
                            document.getElementById("pesoMaximo"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.peso.max}}";
                            document.getElementById("dimensional"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.peso.dimensional}}";
                            document.getElementById("NombrePeso"+(document.getElementById("DisLen").value -1)+"-"+(document.getElementById("CatLen"+(document.getElementById("DisLen").value -1)).value -1)).value = "{{categoria.peso.nombre}}";
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            {% endif %}
        }
        </script>
{% endblock %}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href="/deportes/">Deportes</a> > Nuevo {% endblock %}

{% block content %}
<body onload="loadData();">
<!--
{% for disciplina in xml.disciplinas %}
    {{disciplina.nombre}}<br/>
{% endfor %}
-->

<center><h1>Nuevo Deporte</h1></center>

{% if errores %}
<b>Errores:</b>
<ul>
{% for error in errores %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}

{% if advertencias %}
<b>Advertencias:</b>
<ul>
{% for advertencia in advertencias %}
<li>{{ advertencia }}</li>
{% endfor %}
</ul>
{% endif %}

<form method="POST" action="{{ next }}">{% csrf_token %}
Nombre del deporte: <input type="text" id="nombreDeporte" name="nombreDeporte" />

<div id="datosRequeridos">
  <h2>Datos Requeridos</h2>
  <input type="hidden" value="1" id="DRLen" name="DRLen" />

    <div id="datoRequerido0">
      <select id="nombreDR0" name="nombreDR0">
        {% for dato in datos %}
        <option id="{{dato}}-dr0"value="{{dato}}">{{dato}}</option>
        {% endfor %}
      </select> <button id="removeDR0" type="button" onClick="removeDR(0);">-</button>
    </div>

    <button id="buttonAddDR" type="button" onClick="addDR();">+</button>
</div>

<div id="disciplinas">
    <h2>Disciplinas</h2>
    <input type="hidden" value="1" id="DisLen" name="DisLen" />
    <div id="disciplina0">
        <fieldset>
            <legend>Nombre de Disciplina:
                <input type="text" id="nombreDisciplina0" name="nombreDisciplina0" value="" />
                <button id="removeDisciplina0" type="button" onClick="removeDisciplina(0);" disabled>-</button>
            </legend><br/>
            Tipo de Resultado:
            <select id="tipoResultado0" name="tipoResultado0">
                <option>Puntos</option>
                <option>Tiempo</option>
            </select><br/><br/>
            <input type="checkbox" id="sexoDisciplina0" name="sexoDisciplina0" value="sexo" onclick="habilitarSexo(0);" /> 
            <label id="labelsDisciplina0" for+"sexoDisciplina0">Sexo</label>
            <input type="checkbox" id="edadDisciplina0" name="edadDisciplina0" value="edad" onclick="habilitarEdad(0);" />
            <label id="labeleDisciplina0" for+"edadDisciplina0">Edad</label>
            <input type="checkbox" id="pesoDisciplina0" name="pesoDisciplina0" value="peso" onclick="habilitarPeso(0);" />
            <label id="labelpDisciplina0" for+"pesoDisciplina0">Peso</label>
            <br/>
            
            <div id="categorias0">
                <h3>Categor&iacute;as</h3>
                <input type="hidden" value="1" id="CatLen0" name="CatLen0" />
                <div id="categoria0-0">
            <fieldset>
                <legend>
                Nombre de Categor&iacute;a:
                    <input type="text" id="nombreCategoria0-0" name="nombreCategoria0-0" />
                    <button id="removeCategoria0-0" type="button" onClick="removeCategoria(0,0);" disabled>-</button>
                </legend>
                <table border="0" cellpadding="0" cellspacing="10">
                    <tr>
                        <td>
                            <fieldset>
                                <legend><b>Sexo</b></legend>
                                <input type="radio" id="sexMasculino0-0" name="sex0-0" value="masculino" disabled checked /> Masculino<br />
                                <input type="radio" id="sexFemenino0-0" name="sex0-0" value="femenino" disabled /> Femenino<br />
                                <input type="radio" id="sexMixto0-0" name="sex0-0" value="mixto" disabled /> Mixto<br />
                            </fieldset>
                        </td>
                        <td>
                            <fieldset>
                                <legend><b>Edad</b></legend>
                                
                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td rowspan="2">Min:</td>
                                        <td rowspan="2">
                                            <input type="text" id="edadMinima0-0" name="edadMinima0-0" value="0" style="width:50px;height:23px;" disabled />
                                        </td>
                                        <td>
                                            <input type="button" id="edadMinArriba0-0" value="+" onclick="document.getElementById('edadMinima0-0').value++;" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" disabled >
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="button" id="edadMinAbajo0-0" value="-" onclick="if(document.getElementById('edadMinima0-0').value>0)document.getElementById('edadMinima0-0').value--;" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" disabled>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td rowspan="2">Max:&#160;</td>
                                        <td rowspan="2">
                                            <input type="text" id="edadMaxima0-0" name="edadMaxima0-0" value="0" style="width:50px;height:23px;" disabled />
                                        </td>
                                        <td>
                                            <input type="button" id="edadMaxArriba0-0" value="+" onclick="document.getElementById('edadMaxima0-0').value++;" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" disabled >
                                        </td>
                                    </tr>
                                    <tr>
                                    <td><input type="button" id="edadMaxAbajo0-0" value="-"  onclick="if(document.getElementById('edadMaxima0-0').value>0)document.getElementById('edadMaxima0-0').value--;" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" disabled ></td>
                                    </tr>
                                </table>
                                Nombre:
                                    <input type="text" id="nombreEdad0-0" name="nombreEdad0-0" disabled>
                                    
                            </fieldset>
                        </td>
                        <td>
                            <fieldset>
                                <legend><b>Peso</b></legend>
                                
                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td rowspan="2">Min:</td>
                                        <td rowspan="2">
                                            <input type="text" id="pesoMinimo0-0" name="pesoMinimo0-0" value="0" style="width:50px;height:23px;" disabled />
                                        </td>
                                        <td>
                                            <input type="button" id="pesoMinArriba0-0" value="+" onclick="document.getElementById('pesoMinimo0-0').value++;" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" disabled >
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="button" id="pesoMinAbajo0-0" value="-" onclick="if(document.getElementById('pesoMinimo0-0').value>0)document.getElementById('pesoMinimo0-0').value--;" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" disabled>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td rowspan="2">Max:&#160;</td>
                                        <td rowspan="2">
                                            <input type="text" id="pesoMaximo0-0" name="pesoMaximo0-0" value="0" style="width:50px;height:23px;" disabled />
                                        </td>
                                        <td>
                                            <input type="button" id="pesoMaxArriba0-0" value="+" onclick="document.getElementById('pesoMaximo0-0').value++;" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" disabled >
                                        </td>
                                    </tr>
                                    <tr>
                                    <td><input type="button" id="pesoMaxAbajo0-0" value="-"  onclick="if(document.getElementById('pesoMaximo0-0').value>0)document.getElementById('pesoMaximo0-0').value--;" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" disabled ></td>
                                    </tr>
                                </table>
                                Dimensional utilizada:
                                <select id="dimensional0-0" name="dimensional0-0" disabled >
                                    <option>Kg</option>
                                    <option>lb</option>
                                </select> <br/>
                                Nombre:
                                    <input type="text" id="NombrePeso0-0" name="NombrePeso0-0" disabled />
                            </fieldset>
                        </td>
                    </tr>
                </table>
            </fieldset>
            </div>
        <button id="buttonAddCategoria0" type="button" onClick="addCategoria(0);">+</button>
        </fieldset>
    <br /> 
    </div>
    <button id="buttonAddDisciplina" type="button" onClick="addDisciplina();">+</button>
    
    </div>
    
     <div id='buttons' align='right' class="but-body">
        <input type="submit" align='right' class='savebuton'   value="{{action}}">
        <!input type="submit" class='savebuton'   value="Guardar e ingresar otro"       name='boton_guardar_y_otro'/>
        <!input type="submit" class='savebuton'   value="Guardar y continuar editando" name='boton_guardar_y_editar'/>
        <!input type="submit" class='cancelbuton' value="Cancelar"                     name='boton_cancelar'/>
    </div>
    
    </form>
    
    <div class='buttons' align='right'>
        <input type='submit' value='Cancelar' onclick="document.location = '/deportes/';">
    </div>
    
</body>
{% endblock %}
